<template>
  <!-- 外层弹框 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="65%"
    :before-close="handleClose"
  >
    <!-- 外弹框  表单 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="类目选择" prop="category">
        <el-button type="primary" @click="innerVisible = true">
          类目选择
        </el-button>
        <span class="hint"> {{ ruleForm.category }}</span>
      </el-form-item>
      <el-form-item label="商品名称" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model="ruleForm.price"></el-input>
      </el-form-item>
      <el-form-item label="商品数量" prop="num">
        <el-input v-model="ruleForm.num"></el-input>
      </el-form-item>
      <el-form-item label="商品买点" prop="sellPoint">
        <el-input v-model="ruleForm.sellPoint"></el-input>
      </el-form-item>
      <el-form-item label="商品图片" prop="image">
        <el-button type="primary" @click="innerVisibleImage = true"
          >上传图片</el-button
        >
        <div class="shopImg" v-if="imgBox">
          <img :src="ruleForm.image" alt="" />
        </div>
      </el-form-item>

      <el-form-item label="商品描述" prop="desc">
        <Weditor @WeditorData="WeditorData" ref="Weditor" />
      </el-form-item>
      <!-- 类目选择 -- 商品界面联动 -->
      <template v-if="isShow">
        <el-form-item label="类目参数配置">
          <el-form-item
            v-for="(good, index) in paramsList"
            :label="good.title + index"
            :key="good.key"
            :prop="good.value"
          >
            <div class="item">
              <el-input v-model="good.value"></el-input>
            </div>
            <!-- 内层  -- el-form-item -->
            <el-form-item
              v-for="(item, i) in good.children"
              :label="item.title + i"
              :key="item.key"
              :prop="item.value"
            >
              <div class="item">
                <el-input v-model="item.value"></el-input>
              </div>
            </el-form-item>
            <!-- /内层  -- el-form-item -->
          </el-form-item>
        </el-form-item>
      </template>
    </el-form>
    <!-- 1. 内弹框 --- 类目选择 -->
    <el-dialog
      width="50%"
      title="类目选择"
      :visible.sync="innerVisible"
      append-to-body
    >
      <PromptTree @changeTree="changeTree" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="innerVisible = false">取 消</el-button>
        <el-button type="primary" @click="treeDataShow">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 2. 内弹框 --- 上传图片 -->
    <el-dialog
      width="50%"
      title="上传图片"
      :visible.sync="innerVisibleImage"
      append-to-body
    >
      <UpdataImage @uploadImage="uploadImage" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="innerVisibleImage = false">
          关闭窗口
        </el-button>
      </span>
    </el-dialog>

    <!-- 3. 弹框 -- 按钮 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm('ruleForm')">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import PromptTree from "./PromptTree";
import UpdataImage from "./UpdataImage";
import Weditor from "./Weditor";
export default {
  components: { PromptTree, UpdataImage, Weditor },
  data() {
    return {
      imgBox: false,
      dialogVisible: false,
      innerVisible: false, // 类目弹框
      isShow: false, // 类目参数明细
      innerVisibleImage: false, // 图片弹框
      treeData: {},
      paramsList: [], // 商品联动 类目信息
      ruleForm: {
        category: "", // 类目
        cid: "", // 类目 cid
        title: "",
        price: "",
        num: "",
        sellPoint: "", // 销售热点
        image: "", // 图片地址存储
        desc: "", // 文本 编译信息
        id: "",
      },
      rules: {
        title: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        num: [{ required: true, message: "请输入商品数量", trigger: "blur" }],
      },
    };
  },
  props: {
    rowDataInfo: {
      type: Object,
      defalut: function () {
        return {};
      },
    },
    title: {
      type: String,
      defalut: "标题",
    },
  },
  /**
   * rowDataInfo 需要传递数据给ruleForm
   * watch 监听数据变化
   */
  watch: {
    rowDataInfo(val) {
      // 延迟加载 this.$nextTick(dd=>{})
      this.$nextTick(() => {
        // console.log("prompt-监听函数", val);
        this.ruleForm = val;
        this.ruleForm.desc = val.descs;
        // 图片显示框
        if (val.image !== "") {
          this.imgBox = true;
        }
        // 点击编辑获取类目
        if (val.paramsInfo && val.paramsInfo !== "") {
          this.paramsList = JSON.parse(val.paramsInfo);
          this.isShow = true;
        }
        //富文本的值不会改变  设置值赋值  -- 存在执行顺序问题
        this.$refs.Weditor.editor.txt.html(val.descs);
      });
    },
  },

  methods: {
    /**
     * 点击tree 获得数据不进行渲染
     */
    changeTree(val) {
      this.treeData = val;
    },
    /**
     * 类目选择  确认按钮  显示tree
     */
    treeDataShow() {
      this.innerVisible = false;
      this.ruleForm.category = this.treeData.name;
      this.ruleForm.cid = this.treeData.cid;
      // 后台读取数据 --- 显示规格参数

      this.$api
        .categoryList({
          cid: this.treeData.cid,
        })
        .then((res) => {
          // console.log("++++++++++", res);
          if (res.status == 200) {
            this.isShow = true;
            this.paramsList = JSON.parse(res.result[0].paramData);
          }
        });
    },
    /**
     * 点击上传成功 --- 图片回显
     */
    uploadImage(val) {
      // console.log(val);
      this.ruleForm.image = val;
      this.imgBox = true;
    },
    /**
     * 关闭外弹窗
     */
    handleClose(done) {
      // done();
      this.resetForm("ruleForm");
      this.imgBox = false;
    },
    /**
     *  获取富文本编译内容
     */
    WeditorData(val) {
      // console.log("wang------", val);
      this.ruleForm.desc = val;
    },
    /**
     * 弹框 -- 确认按钮
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let {
            title,
            image,
            sellPoint,
            price,
            cid,
            category,
            num,
            desc,
            id,
          } = this.ruleForm;
          if (this.title == "添加商品") {
            // 参数： title cid  category sellPoint price num desc image paramsInfo
            this.$api
              .insertTbItem({
                title,
                image,
                sellPoint,
                price,
                cid,
                category,
                num,
                desc,
                paramsInfo: JSON.stringify(this.paramsList),
              })
              .then((res) => {
                if (res.status === 200) {
                  // 2. 提示信息
                  this.$message({
                    message: "成功添加一条商品信息",
                    type: "success",
                  });
                  // 3. 更新列表--- 子组件操作父组件事件
                  this.$parent.http(1);
                  // 4. 清空表单   隐藏表单
                  this.resetForm(formName);
                } else {
                  this.$message.error("信息添加错误");
                }
              });
          } else {
            // console.log("编辑商品");
            this.$api
              .updateTbItem({
                title,
                image,
                sellPoint,
                price,
                cid,
                category,
                num,
                desc,
                id,
                paramsInfo: JSON.stringify(this.paramsList),
              })
              .then((res) => {
                // console.log(res);
                if (res.status === 200) {
                  // 2. 提示信息
                  this.$message({
                    message: "修改商品成功",
                    type: "success",
                  });
                  // 3. 更新列表--- 子组件操作父组件事件
                  this.$parent.http(1);
                  // 4. 清空表单   隐藏表单
                  this.resetForm(formName);
                } else {
                  this.$message.error("信息添加错误");
                }
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * 清空表单操作
     */
    resetForm(formName) {
      // 1. 隐藏弹框
      this.dialogVisible = false;
      // 方法一：直接初始化 this.ruleForm = {title:""}
      // 方法二：使用element 清空表单
      this.$refs[formName].resetFields();
      // 3. 清空wangEditor 内容
      this.$refs.Weditor.editor.txt.clear();
      this.imgBox = false;
      this.isShow = false;
    },
  },
};
</script>

<style lang="less" scoped>
.hint {
  margin: 0 10px;
}
.shopImg {
  padding-top: 5px;
  width: 300px;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>